<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="750" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Helper function to draw an arrow
        function drawArrow(fromX, fromY, toX, toY, headLength = 10) {
            const dx = toX - fromX;
            const dy = toY - fromY;
            const angle = Math.atan2(dy, dx);
            ctx.beginPath();
            ctx.moveTo(fromX, fromY);
            ctx.lineTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(toX, toY);
            ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
            ctx.stroke();
        }

        // General settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '18px Arial';
        ctx.textAlign = 'left';

        // --- Draw Wire P and its magnetic field ---
        const wirePx = 220;

        // Draw wire P
        ctx.beginPath();
        ctx.moveTo(wirePx, 50);
        ctx.lineTo(wirePx, 450);
        ctx.stroke();

        // Draw current direction arrow for wire P
        drawArrow(wirePx, 120, wirePx, 80, 15);

        // Draw the plane (rhombus for perspective)
        ctx.beginPath();
        ctx.moveTo(wirePx - 170, 250); // left corner
        ctx.lineTo(wirePx, 200);       // top corner
        ctx.lineTo(wirePx + 170, 250); // right corner
        ctx.lineTo(wirePx, 300);       // bottom corner
        ctx.closePath();
        ctx.stroke();

        // Draw magnetic field lines (concentric ellipses)
        const radiiX = [35, 70, 105, 140];
        const perspectiveFactor = 0.35; // How flat the ellipses are
        radiiX.forEach(rx => {
            ctx.beginPath();
            ctx.ellipse(wirePx, 250, rx, rx * perspectiveFactor, 0, 0, 2 * Math.PI);
            ctx.stroke();
        });

        // --- Draw Wire Q ---
        const wireQx = 580;

        // Draw wire Q
        ctx.beginPath();
        ctx.moveTo(wireQx, 50);
        ctx.lineTo(wireQx, 450);
        ctx.stroke();

        // Draw current direction arrow for wire Q
        drawArrow(wireQx, 180, wireQx, 140, 15);


        // --- Add Labels ---
        // Label for wire P
        ctx.fillText('wire P', wirePx - 25, 40);

        // Label for plane
        ctx.fillText('plane', 60, 210);
        ctx.beginPath();
        ctx.moveTo(110, 215);
        ctx.lineTo(130, 230);
        ctx.stroke();

        // Label for magnetic field pattern
        ctx.fillText('magnetic field', 50, 360);
        ctx.fillText('pattern', 50, 385);
        ctx.beginPath();
        ctx.moveTo(150, 370);
        ctx.lineTo(170, 300);
        ctx.stroke();
        
        // Label for wire Q
        ctx.fillText('wire Q', wireQx - 25, 40);

        // Label for direction of current on wire Q
        ctx.textAlign = 'right';
        ctx.fillText('direction of', 720, 160);
        ctx.fillText('current', 720, 185);
        ctx.textAlign = 'left';
        ctx.beginPath();
        ctx.moveTo(630, 172);
        ctx.lineTo(wireQx + 10, 160);
        ctx.stroke();

        // Figure label
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 8.1', canvas.width / 2, 480);
    </script>
</body>
</html>